<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 auto;
        }

        .box {
            width: 1000px;
            height: 500px;
            /* text-align: center; */
            background: url("./凉.png") no-repeat;
        }

        .box1 {
            width: 800px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <h3>年会抽奖</h3>
            <h1>一等奖：<span class="one"></span></h1>
            <h2>二等奖：<span class="two"></span></h3>
                <b>三等奖：<span class="three"></span></b>
        </div>
    </div>
    <script>
        const personArr = ['周杰伦', '刘德华', '周星驰', '陈佳豪', '成龙']
        const arr = ['one', 'two', 'three']
        for (i = 0; i < arr.length; i++) {
            const ran = Math.floor(Math.random() * personArr.length)
            const span = document.querySelector('.' + arr[i])
            span.innerHTML = personArr[ran]
            personArr.splice(ran, 1)
        }
        console.log(personArr);


        //基础方法
        // const one = document.querySelector('h1')
        // const two = document.querySelector('h2')
        // const three = document.querySelector('b')
        // const a = Math.floor(Math.random() * personArr.length)
        // one.innerHTML = `一等奖：${personArr[a]}`
        // personArr.splice(a, 1)
        // const b = Math.floor(Math.random() * personArr.length)
        // two.innerHTML = `二等奖：${personArr[b]}`
        // personArr.splice(b, 1)
        // const c = Math.floor(Math.random() * personArr.length)
        // three.innerHTML = `三等奖：${personArr[c]}`
        // personArr.splice(c, 1)
        // console.log(personArr);

    </script>
</body>

</html>